<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/statics/layui-v2.6.8//layui/css/layui.css">
    <style>
        #qiao {
            /*position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;*/
            margin: auto;
            border-radius: 25px;
            height: 550px;
            width: 95%;
            border: 3px #C7C7C7 solid
        }

        .divgre {
            float: left;
            margin-left: 20px;
            margin-top: 20px;
            text-align: center;
            border-radius: 15%;
            width: 100px;
            height: 110px;
            border: 1px #00B51D solid;
            background-color: #00B51D;
            font-size: 20px;
            color: #FFFFFF
        }

        .divred {
            float: left;
            margin-left: 20px;
            margin-top: 20px;
            text-align: center;
            border-radius: 15%;
            width: 100px;
            height: 110px;
            border: 1px #FF5000 solid;
            background-color: #FF5000;
            font-size: 15px;
            color: #FFFFFF
        }
    </style>
</head>
<body>
<div class="layui-panel" style="background-color: #DFF0D8">
    <div class="x-nav">
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                            style="line-height:30px">ဂ</i></a>
        <div style="padding: 60px">
            <form class="layui-form" action="" style="width: 535px;position: relative;top: -20px;left: 40px;">
                <div style="float: left">
                    <select lay-verify="" style="width: 10%;">
                        <option value="">请选择一个区域</option>
                        <option>A区</option>
                        <option>B区</option>
                        <option>C区</option>
                    </select>
                </div>
                <button style="float: left;margin-left: 30px;" type="button" class="layui-btn layui-btn-normal">搜索
                </button>
                <ul style="float: right;color: #27ACD4;font-size: 15px;">
                    <li>名称&nbsp;:&nbsp;A区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车位总数&nbsp;:&nbsp;40</li>
                    <li>当前剩余车位&nbsp;:&nbsp;<span id="count">30</span></li>
                    <li>位置&nbsp;:&nbsp;1号楼地下一层</li>
                </ul>
            </form>
        </div>
    </div>
</div>
<h2 style="color: red;margin-top:10px;margin-left:108px;">A区车库</h2>
<div style="border: 1px #00B51D solid; width: 15px;height: 15px;background-color: #00B51D;margin-top:-20px;margin-left:220px;"></div>
<h3 style="margin-top:-20px;margin-left:245px;"> 未占用</h3>
<div style="border: 1px #FF5000 solid; width: 15px;height: 15px;background-color: #FF5000;margin-top:-18px;margin-left:320px;"></div>
<h3 style="margin-top:-20px;margin-left:345px;"> 已占用</h3>
<div id="qiao">
    <div class="divgre">
        <img src="../statics/images/qc.png" style="height: 60%;">
        <span>A1-1</span>
    </div>
    <div class="divred">
        <ul>
            <li><img src="../statics/images/qc.png" style="height: 60%;"></li>
            <li><span>A1-2</span></li>
            <li><span>湘D12345</span></li>
        </ul>
    </div>
</div>
<script src="${pageContext.request.contextPath }/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/layui-v2.6.8/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    $.ajax({
        url: "/parking/planlist",
        async: false,//取消异步请求
        dataType: "json",
        type: "GET",
        data: {size: 100},
        success: function (data) {
            console.log(data);
            $("#qiao").html("")
            var count = 0;
            $(data.data).each(function () {
                    var div = "";
                    if (this.carNumber == null) {
                        count++;
                        div += "<div class='divgre'><ul><li><img src='../statics/images/qc.png' style='height: 60%;'></li>" +
                            "<li><span>" + this.stall + "</span></li></ul></div>"
                    } else {
                        div += "<div class='divred'><ul><li><img src='../statics/images/qc.png' style='height: 60%;'></li>" +
                            "<li><span>" + this.stall + "</span></li><li><span>" + this.carNumber + "</span></li></ul></div>"
                    }
                    $("#qiao").append(div)
                }
            );
            $("#count").html(count)
        }
    })
</script>
</body>
</html>